<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
		/>
		<title>车牌输入</title>
		<link rel="stylesheet" href="./carKeyboard/index.css" />
        <script src="./carKeyboard/jquery.min.js"></script>
        <script src="./carKeyboard/index.babel.js"></script>
        <style>
            .btnBox button{
                display: block;
                padding: 5px 10px;
                border-radius: 10px;
                border: 0;
                margin: 10px;
                background-color: #007bff;
                color: #fff;
            }
        </style>
	</head>
	<body>
		<div id="contnet" style="padding-top: 20vh">
			<h3 style="text-align: center;">车牌输入</h3>
			<div id="carKeyboard"></div>
            <div class="btnBox" style="display: flex;justify-content: center;flex-wrap: wrap;">
                <button id="btn">获取车牌</button>
                <button id="btn2">清除车牌</button>
                <button id="btn3">回显车牌</button>
                <button id="btn4">销毁键盘</button>
            </div>
		</div>
	</body>
	<script>
		let carKey = new CarKeyboard({
			elem: "carKeyboard",
			isValidated: false
		});
        carKey.showKeyboard()

        $("#btn").click(function(){
            console.log(carKey.getPlate())
        })
        $("#btn2").click(function(){
            carKey.clearPlate()
        })
        $("#btn3").click(function(){
            carKey.setPlate("粤B12345")
        })
        $("#btn4").click(function(){
            carKey.destroy()
        })
	</script>
</html>
